<template>
  <!-- 主播管理 -->
  <a-spin class="anchor-review" tip="加载中..." :spinning="isLoading">
    <!-- 表格 -->
    <div style="text-align:right;"><a-button type="danger" @click="toPoi">返回POI管理</a-button></div>
    <div class="main-body self-time-line">
      <a-table :columns="tableColumns" :pagination="false" :data-source="orderList" :scroll="{ x: 900, y: tableHeight }" rowKey="id">
        <!-- 产品相关 -->
        <template slot="productId" slot-scope="text, record">
          <div class="product-item-box">
            <div>
              <p><span class="font-weight-bold">产品ID：</span>{{ record.productId || '无' }}</p>
              <p><span class="font-weight-bold">产品名称：</span>{{ record.productName || '无' }}</p>
              <p><span class="font-weight-bold">产品品类：</span>{{ record.productType || '无' }}</p>
              <p><span class="font-weight-bold">套餐ID：</span>{{ record.productItemId || '无' }}</p>
              <p><span class="font-weight-bold">套餐名称：</span>{{ record.productItemName || '无' }}</p>
              <p><span class="font-weight-bold">抖音映射ID：</span>{{ record.mdyId || '无' }}</p>
              <p><span class="font-weight-bold">SPU_ID：</span>{{ record.spuId || '无' }}</p>
            </div>
            <div>
              <p><span class="font-weight-bold">站点：</span>{{ record.city || '无' }}</p>
              <p><span class="font-weight-bold">产品经理：</span>{{ record.pmName || '无' }}</p>
              <p><span class="font-weight-bold">合同名称：</span>{{ record.contactName || '无' }}</p>
              <p><span class="font-weight-bold">售价/原价：</span>{{ record.salePriceYuan || 0 }}/{{ record.originPriceYuan || 0 }}</p>
              <p><span class="font-weight-bold">剩余库存：</span>{{ record.stockAmount || 0 }}</p>
              <p><span class="font-weight-bold">合作主播数：</span>{{ record.dyUserNum || 0 }}</p>
              <p><span class="font-weight-bold">主播请款金额：</span>{{ record.dyUserMoneyYuan || 0 }}</p>
            </div>
          </div>
        </template>
        <!-- 订单量 -->
        <template slot="productItemSales" slot-scope="text, record">
          <p><span class="font-weight-bold">销量：</span>{{ record.productItemSales || 0 }}</p>
          <p><span class="font-weight-bold">核销量：</span>{{ record.productItemCompleteSales || 0 }}</p>
          <p><span class="font-weight-bold">退款量：</span>{{ record.productItemRefundSales || 0 }}</p>
          <p>
            <span class="font-weight-bold">
              已核销CPS佣金
              <a-tooltip placement="right" overlayClassName="time-line-tooltip">
                <template slot="title">
                  已核销3天后到账的CPS佣金金额(不包含核销未满3天的金额)
                </template>
                <a-icon type="question-circle" :style="{ fontSize: '13px', color: '#4E5969' }" />
              </a-tooltip>
              ：
            </span>
            {{ record.productItemCps || 0 }}
          </p>
          <p>
            <span class="font-weight-bold">
              CPS佣金
              <a-tooltip placement="right" overlayClassName="time-line-tooltip">
                <template slot="title">
                  已在抖音平台生效的CPS佣金
                </template>
                <a-icon type="question-circle" :style="{ fontSize: '13px', color: '#4E5969' }" />
              </a-tooltip>
              ：
            </span>
            {{ record.cpsAmount ? record.cpsAmount + '元' : '0元' }}
          </p>
          <p><span class="font-weight-bold">佣金：</span>{{ record.byteDanceMoney || '无' }}</p>
        </template>
        <!-- 套餐状态 -->
        <template slot="statusFlowList" slot-scope="text, record">
          <a-timeline>
            <a-timeline-item :color="item.color === 2 ? '#57AE59' : 'rgb(206, 205, 205)'" :class="[item.color === 2 ? '' : 'no-line']" v-for="item in record.statusFlowList" :key="item.sort">
              <div class="min-hei-auto">
                <div class="flex-title">
                  <p class="title-text">
                    {{ item.title || 'Title' }}
                    <a-tooltip placement="right" overlayClassName="time-line-tooltip" v-if="item.sort === 2">
                      <template slot="title">
                        <span>{{ item.remark || '' }}</span>
                      </template>
                      <a-icon type="question-circle" :style="{ fontSize: '13px', color: '#4E5969' }" />
                    </a-tooltip>
                  </p>
                  <div :class="['tag-box', item.color === 1 ? 'tag-box-gray' : item.color === 2 ? 'tag-box-green' : 'tag-box-red']">{{ item.statusDesc }}</div>
                </div>
                <p class="time-text">{{ item.time || '' }}</p>
                <div class="reason-text" v-if="item.sort !== 1 && item.reason && item.reason.length === 1">1、{{ item.reason[0] }}</div>
                <a-tooltip placement="right" overlayClassName="time-line-tooltip" v-else-if="item.sort !== 1 && item.reason && item.reason.length > 1">
                  <template slot="title">
                    <div v-for="(v, index) in item.reason" :key="v">{{ index + 1 }}、{{ v }}</div>
                  </template>
                  <div class="reason-text" v-for="(v, index) in item.reason.slice(0, 1)" :key="v">{{ index + 1 }}、{{ v }}</div>
                  <div class="shou-more">显示更多>></div>
                </a-tooltip>
              </div>
            </a-timeline-item>
          </a-timeline>
        </template>
        <!-- 时间 -->
        <template slot="expirTime" slot-scope="text, record">
          <p><span class="font-weight-bold">BD上线时间：</span>{{ record.releaseTime || '无' }}</p>
          <p><span class="font-weight-bold">产品过期时间：</span>{{ record.validEndDate || '无' }}</p>
          <p><span class="font-weight-bold">SPU提审时间：</span>{{ record.applyTime || '无' }}</p>
          <p><span class="font-weight-bold">SPU审核时间：</span>{{ record.auditTime || '无' }}</p>
          <p><span class="font-weight-bold">抖音团购过期时间：</span>{{ record.expirTime || '无' }}</p>
        </template>
        <!-- 商家资质 -->
        <template slot="urls" slot-scope="text, record">
          <div class="zzimg" style="display:flex" v-for="(item, index) in record.qualification" :key="index">
            <p v-for="(v, i) in urlName" :key="i" v-show="index === v.value" style="width:80px;text-align:right;">{{ v.name }} :&nbsp;</p>
            <div v-if="item && item.length > 0">
              <upload v-show="item && item.length > 0" :limit="item.length" disabled :value="item"> </upload>
            </div>
            <div v-else style="margin:0 0 3px 0;">无</div>
          </div>
          <!-- <template v-if="record.urls && record.urls.length > 0">
            <div>
              <upload v-show="record.urls && record.urls.length > 0" :limit="record.urls.length" disabled :value="record.urls"> </upload>
            </div>
          </template>
          <template v-else>
            无
          </template> -->
        </template>
      </a-table>
    </div>

    <!-- 分页 -->
    <div class="paging-container">
      <a-pagination
        :pageSize="pagination.pageSize"
        v-model="pagination.pageIndex"
        :total="pagination.total"
        showQuickJumper
        showLessItems
        :showTotal="(total) => `共 ${total} 条`"
        style="margin: 10px auto;"
        @change="handlePageChange"
      />
    </div>
  </a-spin>
</template>

<script>
import { spuListUrl } from '@/service'
import moment from 'moment'
import { columnsConfig } from '../columns'
import upload from '@/components/upload/upload'
export default {
  name: 'spuInfo',
  components: { upload },
  data() {
    return {
      // 解决气泡
      ztDisVisible: false,
      moment,
      // loading是否显示
      isLoading: false,
      pagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      // table数据查询条件
      search: {
        shopId: ''
      },
      // 订单列表
      orderList: [],
      // tableColumns: columnsConfig.spuColumnsForPoi || []
      urlName: [
        { name: '营业执照', value: 'bizLicencePath' },
        { name: '行业许可证', value: 'qualMaterial' },
        { name: '商家授权函', value: 'contractPath' },
        { name: '商家证明', value: 'merchantCertificate' },
        { name: '其他资质', value: 'additionalQual' }
      ]
    }
  },
  computed: {
    tableColumns() {
      let getColumns = columnsConfig.spuColumnsForPoi || []
      return getColumns
    },
    materialStatus() {
      return [
        {
          name: '全部',
          value: ''
        },
        {
          name: '审核中',
          value: 0
        },
        {
          name: '审核通过',
          value: 1
        },
        {
          name: '审核拒绝',
          value: 2
        },
        {
          name: '未提交',
          value: 3
        },
        {
          name: '无资质',
          value: 4
        },
        {
          name: '协议已过期',
          value: 5
        }
      ]
    }
  },
  methods: {
    handleZtDisSolution() {
      this.ztDisVisible = false
    },
    /**
     * 分页
     * @param {number} num 当前页码
     * @returns {void}
     */
    handlePageChange(num) {
      this.pagination.pageIndex = num
      this.query()
    },

    // 拿参数
    getParams() {
      const { pageIndex, pageSize } = this.pagination
      const { shopId } = this.search

      return {
        pageIndex,
        pageSize,
        shopId
      }
    },
    // 设置搜索
    setSearch() {
      const { pageIndex, id } = this.$route.query
      const queryLen = Object.keys(this.$route.query).length
      if (queryLen) {
        this.search = {
          ...this.search,
          pageIndex: pageIndex ? Number(pageIndex) : 1,
          shopId: id
        }
      }
    },
    toPoi() {
      this.$router.go(-1)
    },
    // 初始化
    initQuery() {
      this.pagination.pageIndex = 1
      this.pagination.pageSize = 10
      this.setPath(this.getParams())
      this.query()
    },

    /**
     * 获取主播信息列表
     * 具体参数参考 getAnchorInfoListApi 方法
     * @returns {Promise<void>}
     */
    query() {
      this.isLoading = true
      spuListUrl(this.getParams())
        .then((rs = {}) => {
          this.orderList = Object.freeze(rs.spuListData) || []
          this.pagination.total = rs.total || 0
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 储存搜索字段
    setPath(origin) {
      const { path } = this.$route
      const query = {}
      for (let key in origin) {
        if (origin[key]) query[key] = origin[key]
      }
      if (query.pageIndex <= 1) delete query.pageIndex
      delete query.pageSize
      this.$router
        .replace({
          path,
          query: {
            ...query
          }
        })
        .catch(() => {})
    }
  },

  mounted() {
    const { id = '' } = this.$route.query || {}
    this.search.shopId = id
    this.setSearch()
    this.query()
  }
}
</script>

<style lang="less" scoped>
.anchor-review {
  padding: 16px;
}

// 主播信息弹窗
.anchor-info {
  /deep/ .ant-modal-footer {
    border-top: none;
    padding-bottom: 36px;
    text-align: center;
  }

  //  描述列表样式覆盖
  /deep/ .ant-descriptions-view {
    .ant-descriptions-item-label {
      color: #666666;
    }

    .ant-descriptions-item-content {
      color: #333;
      vertical-align: text-top;
    }
  }
}
.color-f55 {
  color: #f55f4e !important;
}
.search-box {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  flex-wrap: wrap;
  > div {
    margin-right: 15px;
    margin-bottom: 5px;
  }
}
/deep/ .ant-upload-list-picture-card .ant-upload-list-item,
/deep/ .ant-upload-list-picture-card-container {
  width: 30px;
  height: 30px;
  margin: -6px 3px 6px 0;
  padding: 3px;
  border-radius: 2px;
}
table tbody td div {
  margin-top: 2px;
}
/deep/ table tbody td a {
  margin-right: 0;
}
.multi-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; // 超出两行则以...形式隐藏
  -webkit-box-orient: vertical;
}
.ztDis_box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.zt_discrible_btn {
  color: #0090ff;
  cursor: pointer;
  position: relative;
  top: 6px;
  left: 3px;
}

.zt_discrible_solution_list {
  list-style: none;
}
p {
  margin-bottom: 5px;
  font-size: 13px;
}
.font-weight-bold {
  font-weight: bold;
  display: inline-block;
}
</style>
